<template>
  <div class="w-full h-full overflow-auto bg-white-soft">
<!--    <div class="qa-square-seach mt-6">-->
<!--      <div class="ui container">-->
<!--        <el-row justify="center">-->
<!--          <el-col :span="18">-->
<!--            <form class="search-input flex">-->
<!--              <el-input v-model="data.searchInput" placeholder="请输入问题描述..." class="input-with-select flex-1"-->
<!--                        size="large">-->
<!--                <template #append>-->
<!--                  <el-button icon="Search"/>-->
<!--                </template>-->
<!--              </el-input>-->
<!--            </form>-->
<!--          </el-col>-->
<!--        </el-row>-->
<!--        <el-row justify="center" class="mt-2 hot-search">-->
<!--          <el-text>热搜：</el-text>-->
<!--          <a class="guide-a ml-2">-->
<!--            <el-text>人工智能</el-text>-->
<!--          </a>-->
<!--          <a class="guide-a ml-2">-->
<!--            <el-text>云后端</el-text>-->
<!--          </a>-->
<!--          <a class="guide-a ml-2">-->
<!--            <el-text>数据库</el-text>-->
<!--          </a>-->
<!--        </el-row>-->
<!--      </div>-->
<!--    </div>-->
    <div class="qa-square-main mt-6">
      <div class="ui FHContainer">
        <div class="FHSidebar border-r h-full">
          <ul>
            <li class="categories-item hover:bg-gray-100 select-none rounded">
              <a @click="selectAllCategory">
                <el-icon class="mr-4">
                  <Grid/>
                </el-icon>
                <b>全部分类</b>
              </a>
            </li>
            <el-skeleton v-if="!data.cateInitialized"/>
            <li class="categories-item mt-1 hover:bg-gray-100 select-none rounded" v-for="cate in categories"
                @click="selectCategory(cate.id)">
              <el-popover
                  class="box-item"
                  placement="right"
                  width="auto"
              >
                <template #reference>
                  <a>
                    <el-icon class="mr-4">
                      <component :is="cate.icon"></component>
                    </el-icon>
                    {{ cate.name }}
                  </a>
                </template>
                <div class="grid grid-rows-5 grid-flow-col gap-x-2 gap-y-1">
                  <div v-for="cate_lev2 in cate.children" class="hover:bg-gray-100 px-4 py-2 rounded" @click="selectCategory(cate_lev2.id)">
                    <a>
                      <el-text class="select-none">{{ cate_lev2.name }}</el-text>
                    </a>
                  </div>
                </div>
              </el-popover>
            </li>
          </ul>
        </div>
        <div class="FHMain has-sidebar">
          <div class="FHContent flex flex-row">
            <div class="content">
              <div class="flex">
                <span class="text-xl font-bold">{{ data.questionPage.total }} 个提问</span>
                <div class="flex flex-1 justify-end">
                  <el-segmented id="questions-sort-segmented" v-model="data.questionFilter.sortBy"
                                :options="info.questionsSortOptions" size="large" @change="onSortChange"/>
                  <RouterLink to="questions/publish">
                    <el-button type="primary" icon="Plus" size="large" class="ml-2">提问</el-button>
                  </RouterLink>
                </div>
              </div>
              <el-divider/>
              <div v-if="data.listInitialized">
                <div v-loading="data.listLoading">
                  <div v-for="question in questionList">
                    <div class="flex flex-row">
                      <div id="q-view-count" class="text-right">
                        <el-text size="small">{{ question.viewCountSimple }} 查看</el-text>
                        <br>
                        <el-text size="small">{{ question.answerCountSimple }} 回答</el-text>
                      </div>
                      <div class="pl-3 flex-1">
                        <RouterLink class="guide-a" :to="'questions/detail?id=' + question.id"><el-text size="large">{{ question.title }}</el-text></RouterLink>
                        <div class="mt-1">
                          <el-text line-clamp="2">{{ question.summary }}</el-text>
                        </div>
                        <div class="mt-2">
                          <el-row>
                            <el-col :span="20">
                              <div class="question-tags">
                                <a class="border rounded-md p-1 text-xs select-none">大数据</a>
                                <a class="border rounded-md p-1 text-xs select-none">flink</a>
                              </div>
                            </el-col>
                            <el-col :span="4" class="text-right">
                              <el-text size="small" type="info">{{ question.createBy }} {{ question.creatTimeAgo }}提问
                              </el-text>
                            </el-col>
                          </el-row>
                        </div>
                      </div>
                    </div>
                    <el-divider/>
                  </div>
                </div>
              </div>
              <div v-else>
                <el-skeleton/>
                <el-divider/>
              </div>
              <!-- 分页组件 -->
              <el-pagination
                  v-model:current-page="data.questionPage.currentPage"
                  v-model:page-size="data.questionPage.pageSize"
                  :page-sizes="[10, 20, 50, 100]"
                  :total="data.questionPage.total"
                  background
                  layout="sizes, prev, pager, next"
                  @change="handlePageChange"
              />
            </div>
            <div class="aside">
              <div class="aside-container px-5 py-6">
                <div class="ad mt-4">
                  <el-carousel height="150px" motion-blur>
                    <el-carousel-item>
                      <el-image src="/images/ad/gandi.png"></el-image>
                    </el-carousel-item>
                    <el-carousel-item>
                      <el-image src="/images/ad/tencent.png"></el-image>
                    </el-carousel-item>
                  </el-carousel>
                </div>
                <div class="note mt-4">
                  <div class="note-top">
                    <a class="note-add-btn">
                      <el-icon>
                        <Plus/>
                      </el-icon>
                      提交句子</a>
                  </div>
                  <div class="note-container">
                    人生不如意何止八九，可与人言者何至二三。
                  </div>
                  <div class="note-bottom"></div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import {onMounted, reactive, ref} from 'vue'
import {Grid, Plus} from '@element-plus/icons-vue'
import {Category, QuestionPageResp} from '@/api/qa/types'
import {getCategoryTree, pageQuestion} from '@/api/qa'
import {formatTimeAgo} from '@/utils/time'
import {formatNumberSimple} from '@/utils/math'
import {getLeafIds, TreeNode} from '@/utils/tree'

const info = {
  questionsSortOptions: [
    {value: 'Newest', label: '最新'},
    {value: 'View', label: '浏览量'},
    {value: 'Answered', label: '回答量'},
    {value: 'Bounty', label: '悬赏'},
  ]
}

const data = reactive({
  cateInitialized: false,
  listInitialized: false,
  listLoading: false,
  searchInput: '',
  questionFilter: {
    categoryIds: [],
    sortBy: 'Newest'
  },
  questionPage: {
    pageSize: 10,
    currentPage: 1,
    total: 100,
    totalSimple: '0'
  },
})
const questionList = ref<QuestionPageResp[]>([])
const categories = ref<Category[]>([])
// 分页切换
const handlePageChange = function (currentPage: number, pageSize: number) {
  filterQuestion()
}

const selectCategory = (categoryId: any) => {
  // 请求所有叶子节点类型
  data.questionFilter.categoryIds = getLeafIds(categories.value as TreeNode[], categoryId)
  filterQuestion()
}

const selectAllCategory = () => {
  data.questionFilter.categoryIds = []
  filterQuestion()
}

const filterQuestion = () => {
  loadQuestionList(data.questionPage.currentPage, data.questionPage.pageSize, data.questionFilter)
}

//初始加载数据
const loadCategoryTree = () => {
  // 加载问题分类
  getCategoryTree().then(result => {
    categories.value = result
    data.cateInitialized = true
  })
}
const loadQuestionList = (currentPage: number, pageSize: number, extParams: any = {}) => {
  data.listLoading = true;
  let reqParams = {current: currentPage, size: pageSize, ...extParams}
  // 加载问题列表
  pageQuestion(reqParams).then(result => {
    questionList.value = result?.records?.map(q => {
      q.creatTimeAgo = formatTimeAgo(q.createTime)
      q.viewCountSimple = formatNumberSimple(q.viewCount)
      q.answerCountSimple = formatNumberSimple(q.answerCount)
      return q
    })
    data.questionPage.total = result.total
    data.questionPage.totalSimple = formatNumberSimple(result.total)
    data.listLoading = false;
    if (!data.listInitialized) data.listInitialized = true
  }).catch(() => {
    data.listLoading = false;
  })
}

const onSortChange = (value: any) => {
  data.questionFilter.sortBy = value;
  filterQuestion();
}

onMounted(() => {
  loadCategoryTree();
  loadQuestionList(data.questionPage.currentPage, data.questionPage.pageSize);
})
</script>
<style>
.categories-item a {
  width: 100%;
  display: inline-block;
  padding: 8px;
}

#questions-sort-segmented {
  --el-border-radius-base: 6px;
}

.categories-item .el-icon {
  vertical-align: -0.15em;
}

.question-tags a:not(:first-child) {
  margin-left: 0.50rem;
}

.question-tags a {
  background-color: rgb(241, 242, 243);
}

#q-view-count {
  width: 80px;
}
</style>